<template>
  <div class="builder-container">

    <Tabs size="small">
      <TabPane label="基本配置">
        <Form :label-width="150">
          <FormItem label="标签">
            <Input size="small" v-model="obj.title" placeholder=""/>
          </FormItem>
          <FormItem label="字段名称">
            <Input size="small" v-model="obj.field" placeholder=""/>
          </FormItem>
          <FormItem label="默认值">
            <Input size="small" v-model="obj.value" placeholder=""/>
          </FormItem>
          <FormItem label="组件尺寸">
            <Select :transfer="true" size="small" v-model="obj.props.size">
              <Option value="default">默认</Option>
              <Option value="small">小型</Option>
              <Option value="large">大型</Option>
            </Select>
          </FormItem>
          <FormItem label="是否可多选">
            <i-switch v-model="obj.props.multiple">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="显示清空按钮">
            <i-switch v-model="obj.props.clearable">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="是否禁用状态">
            <i-switch v-model="obj.props.disabled">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="是否支持搜索">
            <i-switch v-model="obj.props.filterable">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>

          <FormItem label="下拉列表为空时显示文本">
            <Input size="small" v-model="obj.props['not-found-text']" placeholder=""/>
          </FormItem>
          <FormItem label="占位文本">
            <Input size="small" v-model="obj.props.placeholder" placeholder=""/>
          </FormItem>

          <FormItemPanel title="备选项配置">
            <Button size="small" type="primary" @click="addOptionItem">添加备选项</Button>
            <div class="m-b-10px"></div>
            <div class="option-item-container" v-for="(o, index) in obj.options" :key="index">
              <span class="delete-option-item-btn" @click.stop="deleteOptionItem(index)"><Icon type="md-trash" size="16"/></span>
              <FormItem label="显示标签">
                <Input size="small" v-model="o.label" placeholder=""/>
              </FormItem>
              <FormItem label="值">
                <Input size="small" v-model="o.value" placeholder=""/>
              </FormItem>
              <FormItem label="是否禁选">
                <i-switch v-model="o.disabled">
                  <span slot="open"></span>
                  <span slot="close"></span>
                </i-switch>
              </FormItem>
            </div>
          </FormItemPanel>

          <FormItemPanel title="栅格布局配置">
            <FormItem label="栅格列数COL">
              <InputNumber size="small" :max="24" :min="1" v-model="obj.col.span"></InputNumber>
            </FormItem>
            <FormItem label="偏移数OFFSET">
              <InputNumber size="small" :max="24" :min="0" v-model="obj.col.offset"></InputNumber>
            </FormItem>
          </FormItemPanel>
        </Form>
      </TabPane>
      <TabPane label="校验规则">
        <CValidatePanel v-model="obj"></CValidatePanel>
      </TabPane>
      <!--<TabPane label="事件监听"></TabPane>-->
    </Tabs>

  </div>
</template>

<script>
  import '../CustomForm.css'

  export default {
    name: 'CSelectBuilder',
    props: {
      value: {
        type: Object
      }
    },
    data() {
      return {
        obj: this.value
      }
    },
    mounted() {

    },
    methods: {
      addOptionItem () {
        this.obj.options.push({
          label: '',
          value: '',
          disabled: false
        })
      },
      deleteOptionItem (index) {
        this.obj.options.splice(index, 1)
      }
    },
    computed: {

    },
    watch: {
      value (val) {
        this.obj = val;
      },
      obj (val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style lang="less" scoped>
  .option-item-container {
    background-color: #424242;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    position: relative;
    &:last-child {
      margin-bottom: 0px;
    }
    .delete-option-item-btn {
      position: absolute;
      left: 5px;
      top: 5px;
      cursor: pointer;
    }
  }
</style>
